<script setup lang="ts">
import { getPermissionAPI, addPermissionAPI, addSubPermissionAPI, deleteSubPermissionAPI } from "@/api/permission.ts";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";

// 获取全部权限
const permissionList = ref()
const selectValue = ref([])
const getPermission = async () => {
  const res = await getPermissionAPI()
  permissionList.value = res.data
}

// 选框被选中
const isChecked = ref(false)
const onChangeBox = (id: string) => {
  const index = selectValue.value.indexOf(id)
  if (index !== -1) {
    selectValue.value.splice(index, 1)
  } else {
    selectValue.value.push(id)
  }
  isChecked.value = true
}

// 添加一级权限
const addPermissionDialog = ref(false)
const pData = reactive({
  name: ''
})
const addPermission = async () => {
  const res: any = await addPermissionAPI(pData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    addPermissionDialog.value = false
    await getPermission()
  }
}

// 添加二级权限
const formData = reactive({
  name: ''
})
const nameRules = ref([
  {required: true, message: '请输入名称', trigger: 'blur'},
]);
const myForm = ref()
const addSubPermission = async (id: any) => {
  const res: any = await addSubPermissionAPI(id, formData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    await getPermission()
    formData.name = ''
  }
}

// 删除二级权限
const deleteSubPermission = async () => {
  const res: any = await deleteSubPermissionAPI(selectValue.value)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    await getPermission()
  }
}

onMounted(() => {
  getPermission()
})
</script>

<template>
  <el-card class="card-auth">
    <el-button type="primary" class="addBtn" @click="addPermissionDialog = true">添加权限</el-button>
    <el-collapse accordion style="margin-top: 40px">
      <el-collapse-item v-for="item in permissionList" :key="item._id">
        <template #title>
          {{ item.name }}
        </template>
        <div class="collapse-content">
          <div>
            <el-checkbox v-for="item2 in item?.subPermission" :key="item2._id" :label="item2.name"
                         @change="onChangeBox(item2._id)" size="large"/>
          </div>
          <div>
            <el-form ref="myForm" :model="formData" label-width="80px" class="form-content">
              <el-form-item label="名称" prop="name" :rules="nameRules">
                <el-input v-model="formData.name" clearable></el-input>
              </el-form-item>
              <el-form-item class="row">
                <el-button v-show="isChecked" @click="deleteSubPermission">删除</el-button>
                <el-button type="primary" @click="addSubPermission(item._id)">添加</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
  <el-dialog v-model="addPermissionDialog">
    <el-input placeholder="请输入名称" v-model="pData.name"/>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary" @click="addPermission">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.card-auth {
  padding: 0 50px;
  height: calc(90vh - 40px);
  overflow: scroll;
  position: relative;
}

.collapse-content {
  display: flex;
  flex-direction: column;

  .form-content {
    display: flex;
    justify-content: flex-end;
  }
}

.addBtn {
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
